<template>
  <div class="mt10">
    <AplidForm v-model="searchModel" v-bind="govSearchConfig" ref="searchRef" :showRules="false" @reset="onReset"
      @submit="onSearch" />

    <ul class="flex align-center nav-box">
      <li class="nav-item" :class="{ active: item.value == activeArea }" v-for="(item, index) in nowAreaList"
        @click="handleCheckArea(item, index)" :key="index">{{ item.label }}</li>
    </ul>

    <el-table show-summary :data="tableData" style="width: 100%">
      <el-table-column label="街道/社区" prop="renge">
        <template #default="{ row }">
          <el-button text @click="handleNext(row)">{{ row.name }}</el-button>
        </template>
      </el-table-column>
      <el-table-column label="政府购买服务统计" >
        <el-table-column label="服务人数" align="center" prop="governmentServicePersonnelNum" />
        <el-table-column label="服务人次" align="center" prop="governmentServicePersonSecond" />
      </el-table-column>
      <el-table-column label="60~79周岁老年人服务统计">
        <el-table-column label="服务人数" align="center" prop="servicesForTheElderlyNum" />
        <el-table-column label="服务人次" align="center" prop="servicesForTheElderlySecond" />
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup lang="ts">
import { govSearchConfig } from '../config'
import apiMod from '@/apiMod'
const userInfo = JSON.parse(sessionStorage.getItem('apld-xningxiang-userInfo')).content
const activeArea = ref('')
const nowAreaList = ref([
  {
    label: '当前市名称',
    value: '',
    level: 0
  },
])
const searchModel = ref()
const tableData = ref([])
const nowRowData = ref({})
const currentArea = ref()
const handleCheckArea = (item: any, index: number) => {
  // 删除掉后面的
  activeArea.value = item.value
  nowAreaList.value = nowAreaList.value.slice(0, index + 1)
  console.log('辉',nowAreaList.value)
  lastLevel.value = item.level
  getInitData(item.value,item.level)
}
// 市看区1,区看街道2，街道看社区传3，本社区传0
let classifyList = ref([])
let classifyLength = ref(0)
let lastLevel = ref(0)
const getAreaList = () => {
  classifyList.value.push(userInfo.authArea || '')
  classifyList.value.push(userInfo.authStreet || '')
  classifyList.value.push(userInfo.authCommunity || '')
  // 如果classifyList的长度为0，市账户不管，长度为1，区账户，最多下钻2级；长度为2，街道账户，最多下钻1级，长度为3,社区账户，最多下钻0级
  classifyLength.value = classifyList.value.filter(Boolean).length
  currentArea.value = classifyList.value.filter(Boolean)[classifyLength.value-1]
    // 得到最初的地区// 如果是区或者街道可以下钻一级，社区不下钻
    if(userInfo.classifyId==3){
      if(classifyLength.value==3){
        nowAreaList.value =  [
          {
            label:userInfo.organizationName,
            value:currentArea.value,
            level: 0
          }
        ]
        lastLevel.value = 0
      }else{
        nowAreaList.value =  [
          {
            label:userInfo.organizationName,
            value:currentArea.value,
            level: 1
          }
        ]
        lastLevel.value = 1
      }
    activeArea.value = currentArea.value
  }
  getInitData( nowAreaList.value[0].value, nowAreaList.value[0].level)
}

const handleNext = (row) => {
  console.log('查看',row)
  const indexKey = nowAreaList.value.findIndex(item => item.value === row.id)
  if(indexKey !==-1) {
    return
  }
  nowRowData.value = row
  activeArea.value = row.id
  if(classifyLength.value==1){
    // 区
    if(lastLevel.value<2){
      nowAreaList.value.push({
        label:row.name,
        value:row.id,
        level: ++lastLevel.value
      })
    }else if(lastLevel.value==2){
      if(nowAreaList.value.length==2){
        activeArea.value = nowAreaList.value[1].value
        return
      }else{
        nowAreaList.value.push({
        label:row.name,
        value:row.id,
        level: 2
      })
      }
    }
    
  }else if(classifyLength.value==2){
    // 街道
    if(lastLevel.value<1){
      nowAreaList.value.push({
      label:row.name,
      value:row.id,
      level: ++lastLevel.value
    })
    }else if(lastLevel.value==1){
      if(nowAreaList.value.length==2){
        nowAreaList.value[1] = {
          label:row.name,
          value:row.id,
          level: 1
        }
      }else{
        nowAreaList.value.push({
        label:row.name,
        value:row.id,
        level: 1
      })
      }
    }
  }else if(classifyLength.value==3){
    // 社区
     return
  }
  let lastItem = nowAreaList.value[nowAreaList.value.length-1]
  getInitData(lastItem.value,lastItem.level)
}
const getInitData = (parentId, type) => {
  apiMod.view_statistics_tblorder({
    parentId,
    type,
    timeBetween: searchModel.value?.timeBetween || ''
  }).then(res=>{
    tableData.value = res.data.resp
    console.log(tableData.value)
  })
}
const onSearch = (form, done) => {
  searchModel.value = form
  let current = nowAreaList.value[nowAreaList.value.length-1]
  getInitData(current.value,current.level)
  done()
}

const onReset = () => {
  searchModel.value = {}
 let current = nowAreaList.value[nowAreaList.value.length-1]
    getInitData(current.value,current.level)
}

onMounted(() => {

 
  getAreaList()
  // getInitData()
})
</script>

<style scoped lang="scss">
.nav-box {
  width: 100%;
  display: flex;
  gap: 20px;
  padding-bottom: 10px;

  .nav-item {
    position: relative;

    &:not(:last-child):after {
      content: '>';
      width: 20px;
      height: 20px;
      position: absolute;
      top: 0;
      right: -25px;
      font-weight: bold;
    }

    &:hover {
      cursor: pointer;
    }
  }

  .active {
    color: rgb(6, 69, 243);
    font-weight: bold;
  }
}
</style>
